<template>
<div class="clearfix" style="min-height: 100%; background-color: #ECF0F3">
    <el-row class="top20">
        <el-col :span="6" v-for="(item, index) in list1" :key="index" >
            <div class="commonBox4" :style="{marginLeft: index==0?'0':'10px', marginRight: index==3?'0':'10px'}">
                <div class="line45 bor_btm_so clearfix" style="padding: 0 40px">
                    <span class="col333 font18">{{item.a}}</span>
                    <span class="right colblue">查看</span>
                </div>
                <div class="clearfix pad30">
                    <span class="left">
                        <span class="font16 verMid left">总<br/>计</span>
                        <span class="colblue bold left10" style="font-size: 40px">{{item.b}}</span>
                    </span>
                    <span class="right">
                        <span class="font16 verMid left">今<br/>日</span>
                        <span class="colblue bold left10" style="font-size: 40px">{{item.c}}</span>
                    </span>
                </div>
            </div>
        </el-col>
    </el-row>
    <div class="top20 ba clearfix">
        <div style="width: 60%" class="right">
            <el-row class="top15">
                <el-col :span="8" v-for="(item, index) in list2" :key="index">
                    <img :src="item.a" alt="" class="left top20 right20">
                    <p class="colfff font24b">{{item.b}}</p>
                    <p class="top10">
                        <span class="btns1">进入</span>
                    </p>
                </el-col>
            </el-row>
        </div>
    </div>
    <div class="top20 bgfff">
        <el-row>
            <el-col :span="12">
                <div class="box1">
                    <div class="imgWap center clearfix">
                        <p class="top24">
                            <span class="font30b colblue">今日<br/>工单</span>
                        </p>
                    </div>
                    <div class="div">
                        <table class="table">
                            <tr>
                                <td>订单号</td>
                                <td>服务项目</td>
                                <td>时间</td>
                            </tr>
                            <tr v-for="(item, index) in list3" :key="index">
                                <td>{{item.a}}</td>
                                <td>{{item.b}}</td>
                                <td>{{item.c}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="box1">
                    <div class="imgWap imgWap2 center clearfix">
                        <p class="top24">
                            <span class="font30b colred">今日<br/>工单</span>
                        </p>
                    </div>
                    <div class="div">
                        <table class="table">
                            <tr>
                                <td>消息</td>
                                <td>发布者</td>
                                <td>时间</td>
                            </tr>
                            <tr v-for="(item, index) in list4" :key="index">
                                <td>{{item.a}}</td>
                                <td>{{item.b}}</td>
                                <td>{{item.c}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="top20">
        <el-row>
            <el-col :span="6">
                <Chart1 />
            </el-col>
            <el-col :span="11">
                <Chart2 />
            </el-col>
            <el-col :span="7">
                <Chart3 />
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import Chart1 from './chart/Chart1'
import Chart2 from './chart/Chart2'
import Chart3 from './chart/Chart3'
import Chart4 from './chart/Chart4'
export default {
    components: {
        Chart1,
        Chart2,
        Chart3,
        Chart4
    },
    data() {
        return {
            list1: [{
                    a: '工单管理',
                    b: 1640,
                    c: 320
                },
                {
                    a: '老人数',
                    b: 1964,
                    c: 206
                },
                {
                    a: '服务人员数',
                    b: 604,
                    c: 52
                },
                {
                    a: '事件处理',
                    b: 502,
                    c: 46
                },
            ],
            list2: [
                {a: require('../../assets/9.png'), b:'银龄影院'},
                {a: require('../../assets/10.png'), b:'智慧课堂'},
                {a: require('../../assets/11.png'), b:'社群通播'},
            ],                            
            list3: [
                {a: '21501869932222002022', b: '民政局', c: '2018-09-20'},
                {a: '25015451524582155555', b: '民政局', c: '2018-09-20'},
                {a: '21212515145205212252', b: '民政局', c: '2018-09-20'},
                {a: '15897924512222222221', b: '民政局', c: '2018-09-20'},
                {a: '25252525252444445623', b: '民政局', c: '2018-09-20'},
            ],
            list4: [
                {a: '解决养老问题的重要事项', b: '民政局', c: '2018-09-20'},
                {a: '解决养老问题的重要事项', b: '民政局', c: '2018-09-20'},
                {a: '解决养老问题的重要事项', b: '民政局', c: '2018-09-20'},
                {a: '解决养老问题的重要事项', b: '民政局', c: '2018-09-20'},
                {a: '解决养老问题的重要事项', b: '民政局', c: '2018-09-20'},
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        const t = this;
    },
    methods: {
        
    }
};
</script>

<style scoped>
.ba{ height: 111px; background-image: url(../../assets/8.png); background-size: 100% 100%;}
.btns1{width:90px; text-align: center; font-size: 16px;
height:35px; display: inline-block; line-height: 35px;
background:rgba(237,243,254,1);
box-shadow:0px 8px 16px 0px rgba(41,122,255,0.32);
border-radius:10px;}

.box1{ height: 385px; position: relative;}
.box1 .imgWap{ height: 100%; width: 157px; position: absolute; top: 0; left: 0; background-image: url(../../assets/13.png); background-size: 100% 100%;}
.box1 .imgWap2{background-image: url(../../assets/12.png);}
.box1 .div{ height: 100%; margin-left: 157px;}
.table{border-left:1px solid rgba(245,245,245,1)}
.table td{ padding: 22px; text-align: center; border-bottom:1px solid rgba(245,245,245,1);}
.table .tr td{ font-size: 18px; color: #333;}
.table tr:nth-child(even) td{background: #FAFAFA;}



</style>
